<script setup lang="ts">
import ChannelNav from './components/ChannelNav.vue'
import ArticleList from './components/ArticleList.vue'
// 1:axios封装
/*
1：下载axios
2:src/utils/request.ts
3:导入axios
4:创建axios副本(设置基地址)
5:配制请求拦截与响应拦截
6:暴露出去
7:src/api/模块名.ts
8:导入request并使用
  使用时要定义接口返回值的数据类型
*/
import { channels } from './api/index'
import { ref } from 'vue'
import type { channelsApiChannels } from './types/channels'
const list = ref<channelsApiChannels>([])
const currId = ref(-1)
const getData = async () => {
  const res = await channels()
  console.log(res.data.channels)
  list.value = res.data.channels
  currId.value = res.data.channels[0].id
}
getData()

// 修改currId
const setCurrId = (id: number) => {
  currId.value = id
}
</script>

<template>
  <ChannelNav :list="list" :currId="currId" @setCurrId="setCurrId"></ChannelNav>
  <ArticleList :currId="currId"></ArticleList>
</template>
